<template>
  <div>
    <nav-bar title="开服表"/>
    <div class="content_scroll">
      <ul class="tab_box">
        <li 
          v-for="(item, index) in serverTitle" 
          :key="index"
          :class="[currentIndex === index ? 'list_active' : '']"
          @click="itemClick(index)">{{item}}</li>
        <span class="line" :style="'transform: translateX(' + this.isActive + 'rem)'"></span>
      </ul>
      <ul class="list_box">
        <li v-for="(item, index) in list" :key="index">
          <img :src="item.gameicon" alt="">
          <div class="list_info">
            <div class="game_name">
              <span>{{item.gamename}}</span>
            </div>
            <div class="game_str">
              <span>{{item.genre_str}}</span>
              <span> | </span>
              <span style="color: #ff5543">
                <span v-if="item.gameType === '1'">BT游戏</span>
                <span v-else-if="item.gameType === '2'">折扣游戏</span>
                <span v-else-if="item.gameType === '3'">H5游戏</span>
              </span>
            </div>
            <div class="game_time">
              <span style="color: #ff0000">{{item.begintime}}</span>
              <span>{{item.servername}}</span>
            </div>
          </div>
          <div class="list_btn">
            <van-button class="van_btn" round v-if="item.gameType === '3'">开始</van-button>
            <van-button class="van_btn" round v-else>下载</van-button>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import NavBar from '../../../components/common/navbar/NavBar.vue'
export default {
  components: { NavBar },
  data() {
    return {
      serverTitle: ['BT游戏', '折扣手游', 'H5游戏'],
      currentIndex: 0,
      list: [
        {
          gamename: "美人三国（送SS级神将）H5",
          gameicon: "https://p1.277sy.com/2021/07/14/60ee54968722d.gif",
          genre_str: "挂机 • 三国",
          begintime: "1628038800",
          servername: "22服",
          gameType: "3",
        },
        {
          gamename: "航海夺宝-无门槛万抽",
          gameicon: "https://p1.277sy.com/2021/07/30/6103b9649cf29.gif",
          genre_str: "卡牌 • 魔幻",
          begintime:"1628056800",
          servername: "19服",
          gameType: "1",
        },
        {
          gamename: "合金弹头:集结(送10000真充)",
          gameicon: "https://p1.277sy.com/2021/07/22/60f91fdee5f90.gif",
          genre_str: "卡牌 • 魔幻",
          begintime:"1628047800",
          servername: "51服",
          gameType: "1",
        },
        {
          gamename: "美人三国（送SS级神将）H5",
          gameicon: "https://p1.277sy.com/2021/07/14/60ee54968722d.gif",
          genre_str: "挂机 • 三国",
          begintime: "1628038800",
          servername: "22服",
          gameType: "3",
        },
        {
          gamename: "航海夺宝-无门槛万抽",
          gameicon: "https://p1.277sy.com/2021/07/30/6103b9649cf29.gif",
          genre_str: "卡牌 • 魔幻",
          begintime:"1628056800",
          servername: "19服",
          gameType: "1",
        },
        {
          gamename: "合金弹头:集结(送10000真充)",
          gameicon: "https://p1.277sy.com/2021/07/22/60f91fdee5f90.gif",
          genre_str: "卡牌 • 魔幻",
          begintime:"1628047800",
          servername: "51服",
          gameType: "1",
        },
        {
          gamename: "美人三国（送SS级神将）H5",
          gameicon: "https://p1.277sy.com/2021/07/14/60ee54968722d.gif",
          genre_str: "挂机 • 三国",
          begintime: "1628038800",
          servername: "22服",
          gameType: "3",
        },
        {
          gamename: "航海夺宝-无门槛万抽",
          gameicon: "https://p1.277sy.com/2021/07/30/6103b9649cf29.gif",
          genre_str: "卡牌 • 魔幻",
          begintime:"1628056800",
          servername: "19服",
          gameType: "1",
        },
        {
          gamename: "合金弹头:集结(送10000真充)",
          gameicon: "https://p1.277sy.com/2021/07/22/60f91fdee5f90.gif",
          genre_str: "卡牌 • 魔幻",
          begintime:"1628047800",
          servername: "51服",
          gameType: "1",
        },
        {
          gamename: "美人三国（送SS级神将）H5",
          gameicon: "https://p1.277sy.com/2021/07/14/60ee54968722d.gif",
          genre_str: "挂机 • 三国",
          begintime: "1628038800",
          servername: "22服",
          gameType: "3",
        },
        {
          gamename: "航海夺宝-无门槛万抽",
          gameicon: "https://p1.277sy.com/2021/07/30/6103b9649cf29.gif",
          genre_str: "卡牌 • 魔幻",
          begintime:"1628056800",
          servername: "19服",
          gameType: "1",
        },
        {
          gamename: "合金弹头:集结(送10000真充)",
          gameicon: "https://p1.277sy.com/2021/07/22/60f91fdee5f90.gif",
          genre_str: "卡牌 • 魔幻",
          begintime:"1628047800",
          servername: "51服",
          gameType: "1",
        },
        {
          gamename: "美人三国（送SS级神将）H5",
          gameicon: "https://p1.277sy.com/2021/07/14/60ee54968722d.gif",
          genre_str: "挂机 • 三国",
          begintime: "1628038800",
          servername: "22服",
          gameType: "3",
        },
        {
          gamename: "航海夺宝-无门槛万抽",
          gameicon: "https://p1.277sy.com/2021/07/30/6103b9649cf29.gif",
          genre_str: "卡牌 • 魔幻",
          begintime:"1628056800",
          servername: "19服",
          gameType: "1",
        },
        {
          gamename: "合金弹头:集结(送10000真充)",
          gameicon: "https://p1.277sy.com/2021/07/22/60f91fdee5f90.gif",
          genre_str: "卡牌 • 魔幻",
          begintime:"1628047800",
          servername: "51服",
          gameType: "1",
        }
      ]
    }
  },
  methods: {
    itemClick(index) {
      this.currentIndex = index
    }
  },
  computed: {
    isActive() {
      return this.currentIndex * 3.333333 + 1.446667 
    }
  },
}
</script>

<style lang="less" scoped>
.tab_box {
  width: 10rem;
  height: 1.093333rem;
  line-height: 1.093333rem;
  font-size: .32rem;
  font-weight: 500;
  color: #666666;
  background: #fff;
  display: flex;
  text-align: center;
  position: relative;
  // top: 0;
  li {
    flex: 1;
  }
  .list_active {
    font-size: .4rem;
    font-weight: bold;
    color: #222;
  }
  .line {
    position: absolute;
    bottom: 0;
    width: .44rem;
    height: .053333rem;
    background: #FF5543;
    transform: translateX();
    transition: all 0.4s ease-in-out;
  }
}

.list_box {
  width: 9.146667rem;
  padding: .133333rem .426667rem;
  li {
    box-sizing: border-box;
    width: 9.146667rem;
    height: 2.266667rem;
    border-radius: .266667rem;
    background: #fff;
    margin-bottom: .133333rem;
    padding: .333333rem .266667rem;
    display: flex;
    font-size: .32rem;
    position: relative;
    img {
      display: block;
      width: 1.6rem;
      height: 1.6rem;
      margin-right: .266667rem;
    }
    .list_info {
      flex: 1;
      .game_name {
        font-size: .4rem;
        font-weight: bold;
        color: #222222;
      }
      .game_str {
        color: #999;
        padding-top: .333333rem;
      }
      .game_time {
        color: #999;
        padding-top: .133333rem;
        span:nth-child(2) {
          padding-left: .133333rem;
        }
      }
    }
    .list_btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: .266667rem;
      width: 1.44rem;
      height: .64rem;
      .van_btn {
        padding: 0;
        border: 0;
        background: #ff5543;
        color: #fff;
        font-size: .32rem;
        width: 1.44rem;
        height: .64rem;
      }
    }
  }
}
</style>